<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style>
        .dropdown {
            /*当我们希望将下拉内容放置在下拉按钮的正下方时使用 position: absolute;*/
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            /*默认是隐藏的 如果希望下拉内容的宽度与下拉按钮的宽度一样，则使用 min-width: 100%;
            设置 overflow: auto; 添加滚动条 如果下拉内容超出了下拉按钮的宽度，则添加滚动条
            */
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            /*让下拉菜单看起来像一张卡片*/
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,2);
            padding: 12px 16px;
            z-index: 1;
        }
        /*当用户将鼠标移动下拉按钮上时,:hover 伪类 选择器用于显示下拉菜单*/
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .dropbtn{
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        /*容器div -需要放置下拉内容*/
        .dropdown1 {
            position: relative;
            display: inline-block;
        }
        /*下拉内容(默认隐藏)*/
        .dropdown-content1 {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        /*下拉链接*/
        .dropdown-content1 a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /*悬停时更改下拉链接的颜色*/
        .dropdown-content1 a:hover {background-color: #f1f1f1}

        /*悬停时显示下拉菜单*/
        .dropdown1:hover .dropdown-content1 {
            display: block;
        }

        /*显示下拉内容时,更改下拉按钮的背景颜色*/
        .dropdown1:hover .dropbtn {
            background-color: #3e8e41;
        }
        .dropdown2 {
            position: relative;
            display: inline-block;
        }

        .dropdown-content2 {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown2:hover .dropdown-content2 {
            display: block;
        }

        .desc {
            padding: 15px;
            text-align: center;
        }
    </style>
</head>
<!--
下拉菜单
使用css 创建悬停的下拉菜单
使用任何元素打开下拉菜单内容 如span 或button元素
使用容器元素 div创建下拉菜单内容
用div元素包含这些元素 使用css 正确定位下拉内容

-->
<body>
<!--创建当用户将鼠标移动元素上时出现的下拉框-->
<div class="dropdown">
    <span>Mouse over me</span>
    <div class="dropdown-content">
        <p>Hello World!</p>
    </div>
</div>
<br>
<br>
<br>
<div class="dropdown1">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content1">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>
<br>
<br>
<br>
<div class="dropdown2">
    <img src="/img/girl_hair_pink_1108892_1920x1080.jpg" alt="girl" width="100">
    <div class="dropdown-content2">
        <img src="/img/girl_flower_dress_1066910_1920x1080.jpg" alt="girl" width="300" height="200">
        <div class="desc">Girl</div>
    </div>
</div>
</body>
</html>